<template>
  <view class="consumption-container">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="nav-back" @tap="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="nav-title">消费记录</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 记录列表 -->
    <view class="consumption-list" v-if="records.length > 0">
      <view class="consumption-item" v-for="(item, index) in records" :key="index">
        <view class="consumption-info">
          <view class="consumption-title">{{item.paymentMethod || '未知交易'}}</view>
          <!-- <view class="consumption-desc">{{item.remark || '无描述'}}</view> -->
          <view class="consumption-time">{{formatDate(item.createdAt || item.createTime) || '未知时间'}}</view>
        </view>
        <view class="consumption-amount">
          <text class="amount-text">-{{item.amount || 0}}</text>
          <view class="consumption-status" :class="{
            'status-pending': item.status === 0,
            'status-success': item.status === 1,
            'status-refund': item.status === 2,
            'status-canceled': item.status === 3
          }">
            {{getStatusText(item.status)}}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空记录提示 -->
    <view class="empty-consumption" v-else>
      <image class="empty-icon" src="/static/images/empty-record.png" mode="aspectFit"></image>
      <text class="empty-text">暂无消费记录</text>
    </view>
  </view>
</template>

<script>
import uIcon from "uview-ui/components/u-icon/u-icon.vue"
import request from '@/util/request.js'

export default {
  components: {
    uIcon
  },
  data() {
    return {
      userInfo: {
        userId: '',
        userAcc: '',
        userName: ''
      },
      records: [],
      loading: false
    }
  },
  onLoad() {
    // 设置状态栏样式
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff'
    });
    
    this.getUserInfo();
    this.getConsumptionRecords();
  },
  methods: {
    goBack() {
      wx.navigateBack();
    },
    
    // 获取用户信息
    getUserInfo() {
      try {
        const userInfo = wx.getStorageSync('userInfo');
        if (userInfo) {
          this.userInfo.userId = userInfo.userId;
          this.userInfo.userAcc = userInfo.userAcc;
          this.userInfo.userName = userInfo.userName;
        } else {
          // 未登录处理
          wx.navigateTo({
            url: '/pages/login/login'
          });
        }
      } catch (e) {
        console.error('获取用户信息失败', e);
      }
    },
    
    // 获取消费记录
    async getConsumptionRecords() {
      if (!this.userInfo.userId) {
        wx.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      wx.showLoading({
        title: '加载中...'
      });
      
      try {
        const res = await request({
          url: '/user-service/user/consumptionRecords',
          method: 'GET',
          data: {
            userId: this.userInfo.userId
          }
        });
        
        wx.hideLoading();
        this.loading = false;
        
        // console.log('消费记录原始数据:', res);
        
        if (res.code === 200 && res.data) {
          this.records = res.data.records || [];
          // console.log('处理后的消费记录:', this.records);
          
          // 检查日期字段
          if (this.records.length > 0) {
            console.log('第一条记录日期字段:', {
              createdAt: this.records[0].createdAt,
              createTime: this.records[0].createTime
            });
          }
        } else {
          wx.showToast({
            title: '获取记录失败',
            icon: 'none'
          });
        }
      } catch (error) {
        wx.hideLoading();
        this.loading = false;
        console.error('获取消费记录失败', error);
        
        wx.showToast({
          title: '获取记录失败',
          icon: 'none'
        });
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 0: return '处理中';
        case 1: return '已完成';
        case 2: return '已退款';
        case 3: return '已取消';
        default: return '未知状态';
      }
    },
    
	formatDate(dateString) {
	  if (!dateString) return '未知时间';
	  
	  try {
	    const date = new Date(dateString);
	    if (isNaN(date.getTime())) return '未知时间';
	    
	    const year = date.getUTCFullYear();                         // UTC 年
	    const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); // UTC 月
	    const day = date.getUTCDate().toString().padStart(2, '0');          // UTC 日
	    const hour = date.getUTCHours().toString().padStart(2, '0');        // UTC 时
	    const minute = date.getUTCMinutes().toString().padStart(2, '0');    // UTC 分
	    
	    return `${year}-${month}-${day} ${hour}:${minute}`;
	  } catch (e) {
	    console.error('日期格式化错误', e);
	    return '未知时间';
	  }
	}
  }
}
</script>

<style lang="scss" scoped>
.consumption-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.nav-header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #ffffff;
  padding: 80rpx 30rpx;
  
  .nav-back {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .nav-right {
    width: 60rpx;
  }
}

.consumption-list {
  padding: 20rpx;
}

.consumption-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.consumption-info {
  flex: 1;
}

.consumption-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.consumption-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.consumption-time {
  font-size: 24rpx;
  color: #999;
}

.consumption-amount {
  text-align: right;
}

.amount-text {
  font-size: 36rpx;
  color: #F44336;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.consumption-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  display: inline-block;
}

.status-pending {
  background-color: #FFF8E1;
  color: #FFA000;
}

.status-success {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.status-refund {
  background-color: #E3F2FD;
  color: #2196F3;
}

.status-canceled {
  background-color: #EEEEEE;
  color: #9E9E9E;
}

.empty-consumption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style> 